<style scoped>
</style>
<template>
  <div>
    <Form ref="formData" :model="formData" :rules="ruleInline" :label-width="120">
      <Row :gutter="32">
        <Col span="12">
          <FormItem prop="batch" label="批次名称">
            <Select v-model="formData.batch" filterable >
              <Option
                v-for="item in this.batchList"
                :key="item.batch"
                :value="item.batch"
              >{{ item.batchName }}</Option>
            </Select>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem prop="comment" label="表描述">
            <Input type="text" v-model="formData.comment" placeholder="项目表" />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="12">
          <FormItem prop="table" label="目标表">
            <Input type="text" v-model="formData.table" placeholder="hkuser" />
          </FormItem>
        </Col>
        <Col span="12">

          <FormItem label="表类型">
              <Select v-model="formData.tableType">
                <Option value="1">小写</Option>
                <Option value="2">大写</Option>
              </Select>
          </FormItem>
        </Col>
      </Row>

      <FormItem prop="sql1" label="查询语句">
        <Input type="textarea" :rows="15" v-model="formData.sql1" placeholder="select * from xxx" />
      </FormItem>
      <FormItem>
        <Button type="info" @click="excuteSql('formData')" :style="{marginRight:'5px'}">执行SQL</Button>
        <Button v-if="this.dbTestFlag" type="success" @click="handleSubmit('formData')">保存</Button>
      </FormItem>
    </Form>
    <Spin fix v-show="addLoading"></Spin>

    <Modal v-model="modal" title="查询结果集" width="100%" :mask-closable="false">
      <ExcuteResult
        v-if="modal"
        v-on:func="closeModal"
        :resultSet="this.resultSet"
        :tableName="this.formData.table"
        :sysName="this.formData.sysName"
        :menuTheme="menuTheme"
      />
      <div slot="footer" :style="{color:'#808695',fontSize:'12px',textAlign:'center'}">温馨提示：只返回20条数据</div>
      <Button v-if="this.dbTestFlag"  style="float:right;" type="success" @click="handleSubmit('formData')">保存</Button>
    </Modal>
  </div>
</template>
<script>
import ExcuteResult from "./executeResult";
export default {
  name: "Add",
  props: {
    menuTheme: String
  },
  components: { ExcuteResult },
  data() {
    return {
      addLoading: false,
      formData: {
        batchName: "",
        sql1: "",
        table: "",
        comment: "",
        batch: "",
        tableType:1,
      },
      ruleInline: {
        batch: [
          { 
            type: 'number',
            required: true,
            message: "批次不能为空",
            trigger: "blur"
          }
        ],
        // targetDbId: [
        //   {
        //     required: true,
        //     message: "目标数据库不能为空",
        //     trigger: "blur"
        //   }
        // ],
        sql1: [
          {
            required: true,
            message: "查询语句不能为空",
            trigger: "blur"
          }
        ],
        table: [
          {
            required: true,
            message: "表名不能为空",
            trigger: "blur"
          }
        ],
        comment: [
          {
            required: true,
            message: "表描述不能为空",
            trigger: "blur"
          }
        ]
      },
      dbTestFlag: false,
      batchList: [],
      databaseList: [],
      modal: false,
      resultSet: []
    };
  },
  methods: {
    //提交表单加校验表单
    async handleSubmit(name) {

      var tableExistMsg = await this.checkTableExist();
   
      if(tableExistMsg){
        return this.$Message.error(tableExistMsg);
      }

      this.$refs[name].validate(async valid => {
        if (valid) {
          
          this.addLoading = true;

          const result = await this.$api.addTask(this.formData);

          this.addLoading = false;

          if (result.code === 1) {
            this.$Message.success("保存成功!");
            this.modal = false;
            this.$emit("fun");
          } else {
            this.$Message.error(result.errMsg);
          }


        }
      });
    },
    //查询批次列表
    async getBatchList() {
      const data = { pages: 1, sizes: 9999 };
      const result = await this.$api.getEtlBatchList(data);
      if (result.code === 1) {
        this.batchList = result.data.list;

        console.log("查询批次列表");
        console.log(this.batchList);
      }
    },
    //获取数据库列表
    async getEtlDBList(pages) {
      const sizes = 200;
      const data = {
        pages:1,
        sizes:200
      };
      const result = await this.$api.getEtlDBList(data);
      this.loading = false;
      if (result.code === 1) {
        this.databaseList = result.data.list;
        
        console.log("获取数据库列表");
        console.log(this.databaseList);
      }
    },
    //执行sql
    async excuteSql(name) {


      var tableExistMsg = await this.checkTableExist();
   
      if(tableExistMsg){
        return this.$Message.error(tableExistMsg);
      }

      this.$refs[name].validate(async valid => {
        if (valid) {
          this.addLoading = true;
          const data = {
            batch: this.formData.batch,
            tableName: this.formData.sql1
          };
          
          console.log("执行sq");
          console.log(data);
          const result = await this.$api.executeSql(data);
          this.addLoading = false;
          if (result.code === 1) {
            this.$Message.success("执行成功!");
            this.dbTestFlag = true;
            this.resultSet = result.data;
            this.modal = true;
          } else {
            this.$Message.error(result.errMsg);
            this.dbTestFlag = false;
          }
        }


      });



    },
    async checkTableExist() {
     
      var tableExistMsg = "";
      const data = {
        batch: this.formData.batch,
        tableName: this.formData.table
      };
      const result = await this.$api.findTableByTableName(data);
      if (result.code != 1) {
         tableExistMsg = result.errMsg;
      }

      return tableExistMsg;



    },
    //关闭结果集modal
    closeModal() {
      this.modal = false;
    }


  },
  mounted() {
    this.getBatchList();
    this.getEtlDBList();
  }
};
</script>